dojo.provide("miaigo.view.board.Cross");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");

dojo.declare(
    "miaigo.view.board.Cross",
    [dijit._Widget, dijit._Templated],
    {
	board: null,
	x: 0,
	y: 0,

	_fiBorderSize: 0,
	_fiSize: 0,
	_crossSize: 0,

	_stone: null,

	templateString:
	    "<div class='cross'>" +
	        "<div dojoAttachPoint='containerNode' dojoAttachEvent='onclick:onClick, onmouseover:onMouseOver, onmouseout:onMouseOut'>" +
	            "<img dojoAttachPoint='stoneNode' class='stone'></img>" +
	            "<div dojoAttachPoint='focusIndicator' class='focusRing'></div>" +
	        "</div>" +
	    "</div>",

	postCreate: function()
	{
	    var boardSize = this.board.getStoneSize();
	    this.setSize(boardSize);
	},

	setSize: function(size)
	{
	    this._crossSize = size;
	    this._fiBorderSize = this._crossSize / 16;
	    this._fiSize = this._crossSize - 2 * this._fiBorderSize;

	    dojo.style(this.domNode, "width", this._crossSize + "px");
	    dojo.style(this.domNode, "height", this._crossSize + "px");

	    dojo.style(this.focusIndicator, "width", this._fiSize + "px");
	    dojo.style(this.focusIndicator, "height", this._fiSize + "px");

	    if (this._stone)
	    {
		dojo.attr(this.stoneNode, "src", "img/stones/" + this._stone + "/" + this._crossSize + ".png");
	    }
	},

	getSize: function()
	{
	    return this._crossSize;
	},

	onClick: function(e)
	{
	    if (this.board && this.board.onCrossClicked)
	    {
		this.board.onCrossClicked(this);
	    }
	},

	onMouseOver: function(e)
	{
	    dojo.style(this.focusIndicator, "border", this._fiBorderSize + "px solid blue");
	},

	onMouseOut: function(e)
	{
	    dojo.style(this.focusIndicator, "border", "none");
	},

	placeStone: function(/* String (black or white*/stone)
	{
	    this._stone = stone;
	    dojo.attr(this.stoneNode, "src", "img/stones/" + stone + "/" + this._crossSize + ".png");
	    dojo.style(this.stoneNode, "display", "block");
	},

	removeStone: function()
	{
	    this._stone = null;
	    dojo.style(this.stoneNode, "display", "none");
	}
    }
);